<template>
  <div id="left2"> 
    <div class="leftChart2" style="width:400px;height:230px;margin:0 auto" ref="leftChart2">

    </div>
  </div>
</template>

<script type="text/javascript">

  import * as echarts from 'echarts'

  export default {

    name: "",
    components: {
    },
    props:['echartData'],
    data() {
      return { 
        projectData: [],
        mapChart: null,
        option: null,
        timer: null,
        timer1: null,

      }
    },
    mounted() { 
      this.$nextTick(_=>{
        let xData=[]
        let yData1=[] 
        this.echartData.forEach(v=>{
          xData.push(v.cityName)
          yData1.push(v.output)  
        }) 
        this.draw(xData,yData1);
      })
    },
    beforeDestroy() {
      this.timer = null
    },
    methods: {
      draw(xData,yData1,yData2) {
        this.mapChart = echarts.init(this.$refs.leftChart2)
        // let xData = Object.keys(this.projectData);
        // console.log(xData)
        // let array = Object.values(this.projectData);
 
        this.option = {
          dataZoom: [
                { // 第一个 dataZoom 组件
                    type: 'inside',
                    xAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个 xAxis
                    startValue: 0, // 数据窗口范围的起始数值index
                    endValue: 4, // 数据窗口范围的结束数值index
                },
          ], 
          grid: {
            left: '0',
            top: '10%',
            right: '0',
            bottom: '12%',
          },
          xAxis: {
            type: 'category',
            data: xData,
            axisLabel: {
              show: true,
              textStyle: { 
                color: '#fff'
              },
              // 文字斜着
              // rotate:45,
            },
            splitLine:{
              show:false
            }
          },
          yAxis: {
					show: true,
					type: 'value',
					axisLabel: {
            show:false,
						formatter: '{value}',
						textStyle: {
							color: '#BCF0FE'
						}
					},
					axisLine: {
						show: false
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "#0E3C79",
						}
					},
					axisTick: { //y轴刻度线去掉
						show: false
					},
				}, 
          series: [
            {
              data: yData1,
              name: '产值',
              type: 'bar',
              showBackground: true,
              barWidth:14,
              backgroundStyle:{
                color:'#061D32FF'
              },
              itemStyle: {
                normal: { 
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#3caab7FF'
                  }, {
                    offset: 1,
                    color: '#13254314'
                  }]),
                }
              },
              label:{
                show:true,
                position: 'top',
                color:'#fff',
                fontSize:12,
              }
            }, 
          ]
        };
        // this.mapChart.setOption(this.option)
        this.option && this.mapChart.setOption(this.option)
			// 设置定时器, 每隔2s判断是否滚动到末尾, 是则重置为初始状态, 否则向前滚动一位
        setInterval(() => {
            if (this.option.dataZoom[0].endValue == yData1.length - 1) {
              this.option.dataZoom[0].endValue = 4
              this.option.dataZoom[0].startValue = 0
            } else {
              this.option.dataZoom[0].endValue =
              this.option.dataZoom[0].endValue + 1
              this.option.dataZoom[0].startValue =
              this.option.dataZoom[0].startValue + 1
            }
            this.mapChart.setOption(this.option)
        }, 2000) 
      }, 
    }
  }
</script>

<style lang="scss" scoped>
 
</style>